<template>
	<view class="bottom-buttons">
		<view class="content-view">
			<view class="left-view">
				<view class="item-content" hover-class="u-hover-class" @click="handleClickLeft">
					<image :src="collectionIocn" class="image-view" v-if="info.favorited==='1'"></image>
					<image :src="emptyCollectionIocn" class="image-view" v-else></image>
					<view class="text-view">收藏</view>
				</view>
			</view>
			<view class="right-view">
				<view class="right-button cancel-button" hover-class="u-hover-class"
					@click="$u.throttle(handleClickCancel, 500)">
					<image :src="audioIcon" class="image-view"></image>
					<view class="text-view">播放录音</view>
				</view>
				<view class="right-button sure-button" hover-class="u-hover-class"
					@click="$u.throttle(handleClickSure, 500)">
					<image :src="videoIcon" class="image-view"></image>
					<view class="text-view">播放朗读视频</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		toRefs,
		watch
	} from "vue"
	const audioIcon = ref("/static/images/article/audio@3x.png")
	const videoIcon = ref("/static/images/article/video@3x.png")
	const collectionIocn = ref("/static/images/index/yishoucang@3x.png")
	const emptyCollectionIocn = ref("/static/images/index/quxiaoshoucang@3x.png")
	const props = defineProps(['info'])
	const {info} = toRefs(props)
	const emit = defineEmits(["left", "cancel", "sure"])
	// watch(info, (val, oldVal) => {
	// 	console.log("watch:info", val);
	// }, {
	// 	deep: true // 开启深度监听
	// })
	const handleClickLeft = () => {
		emit("left")
	}
	const handleClickCancel = () => {
		emit("cancel")
	}
	const handleClickSure = () => {
		emit("sure")
	}
</script>

<style lang="scss" scoped>
	.bottom-buttons {
		z-index: 9999;
		margin: 20rpx 24rpx 32rpx 24rpx;

		.content-view {
			height: 88rpx;
			margin: 20rpx 24rpx 32rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-view {
				flex-shrink: 0;
				margin-right: 32rpx;

				.item-content {
					color: #8D8D8D;
					font-size: 22rpx;
					width: 58rpx;
					height: 88rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.image-view {
						width: 58rpx;
						height: 58rpx;
						margin-bottom: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-shrink: 0;
					}

					.text-view {
						height: 24rpx;
						line-height: 24rpx;
					}
				}
			}

			.right-view {
				font-weight: bold;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.right-button {
					width: 288rpx;
					color: #FFFFFF;
					background: linear-gradient(315deg, #43D9F0 0%, #5CE5D5 100%);
					height: 88rpx;
					border-radius: 44px;
					display: flex;
					justify-content: center;
					align-items: center;

					.image-view {
						width: 38rpx;
						height: 38rpx;
						margin-top: 4rpx;
						margin-right: 10rpx;
					}
				}

				.cancel-button {
					margin-right: 20rpx;
				}

			}
		}

	}
</style>